{% extends "WebMainSiteBundle:Web:layout.html.twig" %}

{% block title %}
    首页
{% endblock %}
{% block myCss %}
    <link rel="stylesheet" href="{{ asset("bundles/webmainsite/web/css/allCategory.css") }}" />
{% endblock %}

{% block myJs %}
    <script src="{{ asset("bundles/webmainsite/web/script/allCategory.js") }}"></script>
    <script type="text/javascript" language="JavaScript">
        var jsonCourseCategory = {{ jsonCourseCategory | raw }};
        var exploreUrl = "{{ path("WebCourseList") }}";
    </script>
{% endblock %}

{% block header_category %}
    <!--all category start-->
    <div class="all_category">
        <div class="switch" id="switch"><a>课程分类</a></div>
        <div class="sub_cat_box">
            <!--1级分类 start-->
            <div class="sub_cat root_cat"><span>{% for cat in rootCourseCategory %}<a href="{{ path("WebCourseList") }}?cat={{ cat.id }}" catId="{{ cat.id }}">{{ cat.name }}</a>{% endfor %}</span></div>
            <!--1级分类 end-->
            <!--2级分类 start-->
            <div class="sub_cat0 "><span></span></div>
            <!--2级分类 end-->
            <!--3级分类 start-->
            <div class="sub_cat1 "><span></span></div>
            <!--3级分类 end-->
        </div>

    </div>
    <!--all category end-->
{% endblock %}

{% block header_banner %}
    <!-- Carousel with Animation -->
    <div id="carousel-anim" class="carousel slide" data-ride="carousel">
        <!-- indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-anim" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-anim" data-slide-to="1"></li>
            <li data-target="#carousel-anim" data-slide-to="2"></li>
        </ol>
        <!-- wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="carousel-caption">
                    <img src="{{ asset("bundles/webmainsite/web/img/home3_slide_mobile.png") }}" class="pull-right carousel-img-mobile" alt="" />
                    <p class="header animated" data-animation="fadeInUp" data-animation-delay="0.8s"><strong>Simply</strong> use our <strong>mobile app</strong></p>
                    <p class="header header-small animated" data-animation="fadeInUp" data-animation-delay="1.4s">Watch  over <strong>12 000</strong> different tutorials about<br />whereever you are via mobile</p>
                    <p class="buttons animated" data-animation="fadeIn" data-animation-delay="2.2s">
                        <a href="plans.htm" class="btn btn-theme btn-orange">Get started</a>
                        <a href="videos-list.htm" class="btn btn-theme btn-green"><i class="fa fa-play"></i> Watch video</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="{{ asset("bundles/webmainsite/web/img/home3_slide_monitor.png") }}" class="pull-right carousel-img-monit" alt="" />
                    <p class="header animated" data-animation="fadeInUp" data-animation-delay="0.8s"><strong>Simply</strong> use our <strong>mobile app</strong></p>
                    <p class="header header-small animated" data-animation="fadeInUp" data-animation-delay="1.4s">Watch  over <strong>12 000</strong> different tutorials<br />about whereever you are via mobile</p>
                    <p class="buttons animated" data-animation="fadeIn" data-animation-delay="2.2s">
                        <a href="plans.htm" class="btn btn-theme btn-orange">Get started</a>
                        <a href="videos-list.htm" class="btn btn-theme btn-green"><i class="fa fa-play"></i> Watch video</a>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="{{ asset("bundles/webmainsite/web/img/home3_slide_mobile.png") }}" class="pull-right carousel-img-mobile" alt="" />
                    <p class="header animated" data-animation="fadeInUp" data-animation-delay="0.8s"><strong>Simply</strong> use our <strong>mobile app</strong></p>
                    <p class="header header-small animated" data-animation="fadeInUp" data-animation-delay="1.4s">Watch  over <strong>12 000</strong> different tutorials about<br />whereever you are via mobile</p>
                    <p class="buttons animated" data-animation="fadeIn" data-animation-delay="2.2s">
                        <a href="plans.htm" class="btn btn-theme btn-orange">Get started</a>
                        <a href="videos-list.htm" class="btn btn-theme btn-green"><i class="fa fa-play"></i> Watch video</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- controls -->
        <a class="left carousel-control" href="#carousel-anim" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-anim" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
{% endblock %}
{% block main %}
    {#{{ dump(recommend) }}#}
    <section class="container content-light">
        <h2 class="blog-title yahei border_left">推荐课程</h2>
        <div class="row">
            {% for i in 1..8 %}
                <article class="col-md-3 video-item">
                    <a href="video.htm" class="video-prev video-prev-small"></a>
                    <h3 class="video-title"><a href="video.htm">如何功课PHP中的各种结束难关</a></h3>
                    <div class="row video-params">
                        <div class="col-md-7">
                            讲师: <b>李自成</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-user"></i></a>
                        </div>
                    </div>
                    <div class="row video-params">
                        <div class="col-md-7">
                            更新: <b>09.01</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-heart"></i></a>
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>

    <hr/>

    <section class="container content-light">
        <h2 class="blog-title yahei border_left">推荐课程</h2>
        <div class="row">
            {% for i in 1..4 %}
                <article class="col-md-3 video-item">
                    <a href="video.htm" class="video-prev video-prev-small"></a>
                    <h3 class="video-title"><a href="video.htm">如何功课PHP中的各种结束难关</a></h3>
                    <div class="row video-params">
                        <div class="col-md-7">
                            讲师: <b>李自成</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-user"></i></a>
                        </div>
                    </div>
                    <div class="row video-params">
                        <div class="col-md-7">
                            更新: <b>09.01</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-heart"></i></a>
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>
    <hr/>

    <section class="container content-light">
        <h2 class="blog-title yahei border_left">推荐课程 <a href="#" class="text-right more_course">查看更多</a></h2>
        <div class="row">
            {% for i in 1..4 %}
                <article class="col-md-3 video-item">
                    <a href="video.htm" class="video-prev video-prev-small"></a>
                    <h3 class="video-title"><a href="video.htm">如何功课PHP中的各种结束难关</a></h3>
                    <div class="row video-params">
                        <div class="col-md-7">
                            讲师: <b>李自成</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-user"></i></a>
                        </div>
                    </div>
                    <div class="row video-params">
                        <div class="col-md-7">
                            更新: <b>09.01</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-heart"></i></a>
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>
    <hr/>

    <section class="container content-light">
        <h2 class="blog-title yahei border_left">推荐课程</h2>
        <div class="row">
            {% for i in 1..4 %}
                <article class="col-md-3 video-item">
                    <a href="video.htm" class="video-prev video-prev-small"></a>
                    <h3 class="video-title"><a href="video.htm">如何功课PHP中的各种结束难关</a></h3>
                    <div class="row video-params">
                        <div class="col-md-7">
                            讲师: <b>李自成</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-user"></i></a>
                        </div>
                    </div>
                    <div class="row video-params">
                        <div class="col-md-7">
                            更新: <b>09.01</b>
                        </div>
                        <div class="col-md-5 text-right">
                            <b>102</b> <a href="#"><i class="fa fa-heart"></i></a>
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>

    <hr class="invisible" />
    <hr class="invisible" />

    <section class="content content-dark bg-dark-img">
        <div class="container">
            <p class="header text-center text-white">
                <strong> 加入知更鸟 </strong>
                <strong> 为教育撑起一片新的蓝天 </strong>
            </p>
            <p class="header header-tiny text-center text-white">Lets start today and meet a lot of talented people from all over the world</p>
            <p class="buttons text-center">
                <a href="" class="btn btn-theme btn-orange">申请成为教师</a>
                <a href="" class="btn btn-theme btn-green">申请学校入住</a>
            </p>
        </div>
    </section>

    <section class="content content-light">
        <div class="container">
            <p class="header text-center"><strong>权威教育机构加盟入驻 教育局联合监管</strong></p>
            {#<p class="text-center">We believe that analysis of your company and your customers is key in responding effectively to your promotional needs and we will work with you to fully understand your business.</p>#}

            {#<hr class="invisible" />#}
            {#<hr class="invisible" />#}
            <hr class="invisible" />

            <div class="row our-team">
                <div class="col-md-3">
                    <figure>
                        <img src="{{ asset("bundles/webmainsite/web/img/213x213.gif") }}" class="img-rounded" alt="Edward Willis" />
                        <figcaption>里昂教育培训中心</figcaption>
                    </figure>
                    <p class="button-full">
                        <a href="" class="btn btn-theme btn-green" data-content="23 Tutorials" data-placement="bottom">
                            <i class="fa fa-play"></i> 进入学校
                        </a>
                    </p>
                </div>
                <div class="col-md-3">
                    <figure>
                        <img src="{{ asset("bundles/webmainsite/web/img/213x213.gif") }}" class="img-rounded" alt="Chuck Dorothe" />
                        <figcaption>东营市一中</figcaption>
                    </figure>
                    <p class="button-full">
                        <a href="" class="btn btn-theme btn-green" data-content="23 Tutorials" data-placement="bottom">
                            <i class="fa fa-play"></i> 进入学校
                        </a>
                    </p>
                </div>
                <div class="col-md-3">
                    <figure>
                        <img src="{{ asset("bundles/webmainsite/web/img/213x213.gif") }}" class="img-rounded" alt="Adam Sandler" />
                        <figcaption>东营市二中</figcaption>
                    </figure>
                    <p class="button-full">
                        <a href="" class="btn btn-theme btn-green" data-content="23 Tutorials" data-placement="bottom">
                            <i class="fa fa-play"></i> 进入学校
                        </a>
                    </p>
                </div>
                <div class="col-md-3">
                    <figure>
                        <img src="{{ asset("bundles/webmainsite/web/img/213x213.gif") }}" class="img-rounded" alt="Susan Westwik" />
                        <figcaption>新东方培训学校</figcaption>
                    </figure>
                    <p class="button-full">
                        <a href="" class="btn btn-theme btn-green" data-content="23 Tutorials" data-placement="bottom">
                            <i class="fa fa-play"></i> 进入学校
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}